<template>
    <div class="record-box">
        <div class="content">
            <header class="content-box">
                <img src="../../assets/image/user_img.png" alt="user_img">
                <div class="name">马天夏</div>
                <div class="role">墨点狗智能科技有限公司 / 产品经理</div>
            </header>
            <main>
                <div class="main-box">
                    <div class="classify">
                        <div class="name"><span></span>基本信息</div>
                        <div class="show-box">
                            <div><span>用户名</span><span>Lenone</span></div>
                            <div><span>性别</span><span>男</span></div>
                            <div><span>现居城市</span><span>广东/广州</span></div>
                            <div><span>年龄</span><span>27岁</span></div>
                            <div><span>手机号码</span><span>13489235678</span></div>
                            <div><span>邮箱地址</span><span>47187632@136.com</span></div>
                        </div>
                    </div>
                    <div class="classify">
                        <div class="name"><span></span>工作经验<div class="time">2017.10-至今</div>
                        </div>
                        <div class="show-box">
                            <div class="img-block">
                                <img src="../../assets/image/circle.png" alt="circle">
                            </div>
                            <div class="content-block">
                                <div class="company">墨点狗智能科技有限公司</div>
                                <div class="company-role">运营推广主管</div>
                                <p>网站常态运营活动规划和推进执行;</p>
                                <p>相关数据报告和统计，为公司决策层提供决策依据;</p>
                                <p>轻量级产品和应用的策划，统筹产品、技术团队成员实施</p>
                            </div>
                            </div>
                            <div class="img-block">
                                <img src="../../assets/image/circle.png" alt="circle">
                            </div>
                            <div class="content-block">
                                <div class="time">2016.10-2017.10</div>
                                <div class="company">广州灵心沙文化活动有限公司</div>
                                <div class="company-role">市场推广专员</div>
                                <p>负责社会化媒体营销团队的搭建工作，制定相关运营策略和指标，带领团队实施计划;</p>
                                <p>网站常态运营活动规划和推进执行;</p>
                            </div>
                        </div>
                    <div class="classify">
                        <div class="name"><span></span>教育背景<div class="time">2013.9-2017.7</div></div>
                        <div class="show-box">
                            <div class="img-block">
                                <img src="../../assets/image/circle.png" alt="circle">
                            </div>
                            <div class="content-block">
                                <div class="company">五百丁科技大学</div>
                                <div class="company-role">市场营销(本科)</div>
                                <p>基本会计、统计学、市场营销、国际市场营销、市场调查与预测、商业心理学、广告学、</p>
                                <p>公共关系学、货币银行学、经济法、国际贸易、大学英语、经济数学、计算机应用等</p>
                            </div>
                        </div>
                    </div>
                    <div class="classify">
                        <div class="name"><span></span>获奖情况</div>
                        <div class="show-box">
                            <div class="company-role">2011.4挑战杯创业计划大赛省级铜奖</div>
                            <div class="company-role">2017年xx学院毕业设计金奖</div>
                        </div>
                    </div>
                    <div class="classify">
                        <div class="name"><span></span>技能证书</div>
                        <div class="show-box">
                            <div class="company-role">CET-6，优秀的听说写能力</div>
                            <div class="company-role">计算机二级，熟悉计算机各项操作</div>
                            <div class="company-role">高级营销员，国家职业资格四级</div>
                        </div>
                    </div>
                    <div class="classify">
                        <div class="name"><span></span>软件技能</div>
                        <div class="show-box">
                            <p>PHOTOSHOP</p>
                            <el-progress :percentage="80" class="progress"></el-progress>
                            <p>ILLUSTRATOR</p>
                            <el-progress :percentage="50" class="progress"></el-progress>
                            <p>SKETCH</p>
                            <el-progress :percentage="50" class="progress"></el-progress>
                        </div>
                    </div>
                    <div class="classify">
                        <div class="name"><span></span>掌握语言</div>
                        <div class="language-box">
                            <div><span>普通话：</span><span>母语，熟练听说读写，获得二甲证书；</span></div>
                            <div><span>英语：</span><span>英语专业毕业，能够流畅沟通，良好的听说读写能力，获得TEM-8，CET-6证书；</span></div>
                            <div><span>日语：</span><span>大学小语种第二外语，初步掌握，能够简单沟通。</span></div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</template>

<script>
export default {
    name: "user-record"
};
</script>

<style scoped>
.record-box {
    width: 100%;
    height: 100vh;
    background: #f8f9fa;
    position: absolute;
}
.content {
    margin: 32px 28px 27px;
    box-shadow: 0 0 10px 0 rgba(53, 129, 251, 0.1);
    border-radius: 2px;
}
header {
    height: 284px;
    background: #f5f7f9;
    text-align: center;
}
header img {
    width: 120px;
    margin-top: 56px;
}
header .name {
    font-size: 20px;
    color: #131d2d;
    font-weight: 600;
}
header .role {
    font-size: 14px;
    color: #131d2d;
    margin-top: 6px;
}
main {
    background-color: #fff;
}
.main-box {
    width: 700px;
    padding-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

.main-box .name {
    height: 22px;
    font-size: 16px;
    color: #3581fb;
}
.name > span {
    display: inline-block;
    width: 4px;
    height: 22px;
    background-color: #3581fb;
    margin-right: 8px;
    vertical-align: top;
}
.time {
    float: right;
    font-size: 14px;
    color: #a3b4cc;
}
.show-box {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #d9deea;
    padding-bottom: 56px;
    font-size: 14px;
}
.show-box > div {
    margin-top: 6px;
    height: 20px;
}
.show-box > div > span:first-of-type {
    display: inline-block;
    color: #6f83a1;
    width: 70px;
}
.show-box > div > span:last-of-type {
    margin-left: 18px;
    color: #131d2d;
}
.img-block {
    width: 20px;
    display: inline-block;
    vertical-align: top;
}
.img-block > img {
    width: 100%;
}
.content-block {
    display: inline-block;
    width: calc(100% - 40px);
    margin-left: 10px;
}
.content-block .company {
    color: #131d2d;
    font-weight: 600;
    height: 20px;
}
.content-block .company-role {
    margin-top: 4px;
}
.content-block p:first-of-type {
    margin-top: 12px;
}
.content-block p {
    color: #6f83a1;
}
.show-box > p {
color:#6f83a1;
}
.show-box >.progress {
    width: 160px;
    margin-top: 0;
}
.language-box {
    margin-top: 16px;
    border-top: 1px solid #d9deea;
    padding-top: 10px;
    color: #131d2d;
    padding-bottom: 40px;
}
.language-box > div > span:first-of-type {
    font-weight: 600;
}
</style>

